<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="_token" content="{{ csrf_token() }}"/>
  <title>Qkids久趣英语</title>

  <script>if (location.href.indexOf('qkids.cn/wx') > -1) location.href = location.href.replace('qkids.cn/wx', 'wx2.97kid.com/wx')</script>

  @if (getenv('APP_ENV') === 'local')
  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/css/phonics.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  @else
  <link href="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/css/phonics.min.css?v={{config('app.version')}}" rel="stylesheet" type="text/css">
  @endif

  @include('mobile.partial.config')
  @include('mobile.partial.product')
  @include('mobile.partial.wechatSign')
  @include('mobile.partial.browserSync')
</head>
<body>
<div class="container">
  <div class="banner">
    <div class="play-icon" id="playVideo"></div>
    <script>
      var count = true, video = document.getElementById('playVideo')
      setInterval(function () {
        video.style.transform = 'scale(' + (count ? '1.2' : '1') + ')'
        count = !count
      }, 700)
    </script>
  </div>
  <div class="main">
    <div class="content">
      <div class="price">
        <span class="current-price">9</span><span class="original-price">180</span><span>（2节课）+ 邀请新用户再送2节课</span>
      </div>
      <div class="title">孩子1秒就爱上 轻松认读新单词</div>
    </div>
    <div class="progress">
      <div class="title">我的解锁进度</div>
      <div class="list">
        <div class="item lock lesson-1">第1节</div>
        <div class="item lock lesson-2">第2节</div>
        <div class="item lock lesson-3">第3节</div>
        <div class="item lock lesson-4">第4节</div>
      </div>
    </div>
    <div class="notice">
      <span class="title" style="margin: 0 -2px;">剩余时间：</span>
      <span class="day-1">0</span><span class="day-2">2</span>
      <span style="margin: 0 -2px;">天</span>
      <span class="hour-1">0</span><span class="hour-2">0</span>
      <span style="margin: 0 -2px;">:</span>
      <span class="min-1">0</span><span class="min-2">0</span>
    </div>
  </div>
  <div class="instruction">
    <div class="title">
      报名方法
    </div>
    <ul class="text">
      <li>支付9元，解锁2节课；</li>
      <li>2天内邀请两位新用户购买，解锁剩余2节课。</li>
    </ul>
  </div>
  <div class="background">
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-1.jpg?v={{config('app.version')}}">
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-2.jpg?v={{config('app.version')}}">
    <div class="level level-1">
      <div class="level-buttons">
        <div class="level-1">lv1</div>
        <div class="level-2">lv2</div>
      </div>
      <div class="level-select"></div>
      <div class="level-content">
        <img class="level-1" src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/level-1.jpg?v={{config('app.version')}}">
        <img class="level-2" src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/level-2.jpg?v={{config('app.version')}}">
      </div>
    </div>
    @if (!$share)
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-4.jpg?v={{config('app.version')}}">
    @endif
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-5.jpg?v={{config('app.version')}}">
    <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-6.jpg?v={{config('app.version')}}">
    <div class="qrcode">
      <img src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/img/bg-7.jpg?v={{config('app.version')}}">
      <div id="account-info">
        当前账号: <span id="current-account"></span> | <span id="switch-account">切换账号</span>
      </div>
    </div>
  </div>
  <div id="buy" class="buy" data-pid="{{$extraCampaignProduct['p_id']}}">支付9元解锁2节拼读课</div>
  <div id="stop" class="buy" style="display: none;">活动已结束</div>
  <div class="share-mask">
    <div class="share-arrow"></div>
  </div>
</div>

@if (getenv('APP_ENV') === 'local')
<script src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/js/phonics.js?v={{config('app.version')}}"></script>
@else
<script src="{{env('CDN_RESOURCE')}}/js/mobile/debug.js?v={{config('app.version')}}"></script>
<script src="{{env('CDN_RESOURCE')}}/mobile/campaign/phonics/js/phonics.min.js?v={{config('app.version')}}"></script>
@endif

@include('mobile.partial.video', [
  'prefix' => 'p004',
  'finishTime' => '110',
  'videoOption' => [
    'm3u8' => 'http://1251352844.vod2.myqcloud.com/45f5686avodtransgzp1251352844/1bb2a9b07447398157007465284/v.f20.mp4',
    'autoplay' => false,
    'coverpic' => '',
    'width' => '640',
    'height' => '480',
    'live' => false,
    'systemFullscreen' => true
  ]
])
</body>
</html>